<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-select v-model="projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目名称" filterable>
					<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
				</el-select>
				<el-date-picker class="zs-space-right-sm" v-model="yearmonth" :type="pickerDate" placeholder="日期" :clearable="false" :value-format="valueFormat" />
				<el-select v-model="curType" filterable class="zs-select-md zs-space-right-sm" placeholder="口径">
					<el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value" />
				</el-select>
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': duibiao }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-select v-model="duibiao" class="zs-select-md zs-space-right-sm" placeholder="对标方式" :teleported="false" @change="chanegMark">
							<el-option label="标准对标" value="1" />
							<el-option label="预算对标" value="2" />
						</el-select>
					</template>
				</el-popover>
				<el-button class="zs-btn-plain" @click="getData()"> 查询 </el-button>
			</span>
			<el-button class="zs-btn-plain" @click="handleDownload" disabled>
				<el-icon class="el-icon--left"> <Upload /> </el-icon>
				<span>导出</span>
			</el-button>
		</div>
		<div class="zs-card zs-table-page-content">
			<SubjectTable v-if="yearmonth" :projectCode="projectCode" :yearmonth="yearmonth" :standard="duibiao" :isFresh="isFresh" :curType="curType"> </SubjectTable>
		</div>
	</div>
</template>
<script setup lang="jsx">
	import SubjectTable from '@/views/Property/detailPages/budgetcAhievement/subjectTable';
	import projectListApi from '@/api/Property/projectList';
	import { ref } from 'vue';
	import { useRoute } from 'vue-router';
	const route = useRoute().query;

	//对标方式
	let duibiao = ref('1');
	const menuKey = ref(route.menuKey);
	const pageKey = ref(route.pageKey);

	const typeList = ref([
		{ value: 1, name: '管理口径' },
		{ value: 2, name: 'EAS口径' },
		{ value: 3, name: '调整台账' },
	]);
	const curType = ref(1);

	// 项目下拉选
	let projectList = ref([]);

	const projectCode = ref(route.projectCode);
	const yearmonth = ref(route.yearmonth);

	let valueFormat = ref('YYYY-MM');
	let pickerDate = ref('month');
	let isFresh = ref('');

	const getList = () => {
		projectListApi.queryProjectListApi({ companyAreaManage: '整体', menuKey: menuKey.value, pageKey: pageKey.value }).then(res => {
			if (res.data.code == 200) {
				projectList.value = res.data.data;
			}
		});
	};

	const init = async () => {
		getList();
	};

	const getData = () => {
		isFresh.value = new Date().getTime();
	};

	// 导出
	const handleDownload = async () => {
		// const fileName = `${curTab.value}明细.xls`
		// let fileData
		// if (curTab.value == '月份') {
		//     await detailApi.monthExportApi({ biProjectCode: biProjectCode.value, year: searchDate.value }).then(res => {
		//         fileData = res.data
		//     })
		//     downloadNewFile(fileData, fileName)
		// }
		// if (curTab.value == '科目') {
		//     await detailApi.subjectExportApi({ biProjectCode: biProjectCode.value, yearmonth: searchDate.value }).then(res => {
		//         fileData = res.data
		//     })
		//     downloadNewFile(fileData, fileName)
		// }
	};

	//对标方式
	const chanegMark = data => {
		console.log(data);
	};

	init();
</script>

<style scoped lang="scss"></style>
